<template>
    <view class="wrapper">
        <view class="title">1. 按钮类型 (type)</view>
        <button type="primary">主按钮 (primary)</button>
        <button type="default">次要按钮 (default)</button>
        <button type="warn">警告按钮 (warn)</button>

        <view class="title">2. 按钮尺寸 (size="mini")</view>
        <button type="primary" size="mini">迷你按钮</button>
        <button type="default" size="mini" style="margin-left: 10px;">迷你按钮</button>

        <view class="title">3. 加载中状态 (loading="true")</view>
        <button type="primary" loading="true">加载中...</button>
        
        <view class="title">4. 禁用状态 (disabled="true")</view>
        <button type="primary" disabled="true">不可点击</button>
    </view>
</template>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
/* button 默认是块级元素，会占满一行，这里给个间距 */
button {
    margin-bottom: 15px;
}
/* mini 按钮是行内元素，可以并排 */
</style>